<!--
## 3.7. 【toRefs 与 toRef】

- 作用：将一个响应式对象中的每一个属性，转换为`ref`对象。
- 备注：`toRefs`与`toRef`功能一致，但`toRefs`可以批量转换。
-->
<template>
  <div class="person2">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>性别：{{ person.gender }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script setup lang="ts" name="Person2">
import {reactive, toRef, toRefs} from "vue";

// 数据
const person: { name: string, age: number, gender: string } = reactive({
  name: "张三",
  age: 30,
  gender: '男'
});

// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let {name, gender} = toRefs(person)

// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
let age = toRef(person, 'age')

// 方法
const changeName = (): void => {
  name.value += "~";
};

const changeAge = (): void => {
  age.value++;
};

const changeGender = (): void => {
  gender.value = '女';
}

</script>

<style scoped lang="scss">
.person2 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
}
</style>
